<template>
	<view class="container">
		<view class="fgx u-m-t-20">
		</view>
		<view class="f-list u-flex u-m-b-20 u-m-t-18" v-for="(item, index) in list" :key="index">
			<view class="qylg u-m-b-20" :style="{ backgroundImage: 'url(' + bjxm + ')' }">
				<text>{{item.logo}}</text>
			</view>
			<view class="f-item u-m-l-32 u-m-b-20">
				<view class="title u-flex u-m-t-12">
					<view class="">
						<text class="name">{{ item.name }}</text>
						<text v-if="item.leader" class="tz">团长</text>
					</view>
					<view class="fpbl u-flex">
						<text>分配比例</text>
						<input type="text" class="fpblsz" value="" />
						<text class="bfh">%</text>
					</view>
				</view>
				<view class="explain u-flex u-m-t-25">
					<text class="bz">备注</text>
					<input class="bzxx" type="text" value=""  placeholder="请输入备注信息"/>
				
				</view>
			</view>
		</view>
		<view class="u-m-t-20 u-p-30">
			<u-button class="button" @click="submit">保存</u-button>
		</view>
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				bjxm: "../../static/homepage/xmkk.png",
				list:[
					{
						name:'华晨宇',
						logo:'姓名',
						explain:'能者多得',
						leader: true
					},
					{
						name:'张三',
						logo:'姓名',
						explain:'能者多得'
					},
					{
						name:'张三',
						logo:'姓名',
						explain:'能者多得'
					},
					{
						name:'张三',
						logo:'姓名',
						explain:'能者多得'
					},
					{
						name:'张三',
						logo:'姓名',
						explain:'能者多得'
					},
					{
						name:'张三',
						logo:'姓名',
						explain:'能者多得'
					},
				]
			}
			
		},
		onLoad(options){
		},
		methods:{
		},
		
	}
</script>

<style scoped lang="scss">
	.fgx{
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
	}
	.f-list{
		border-bottom: 2rpx solid #DADFED;
	}
	.qylg{
			width: 102rpx;
			height: 118rpx;
			background-size: 100% auto;
			background-position: 0 bottom;
		margin-top: 15rpx;
		overflow: hidden;
		text-align: center;

		text {
			color: #888D99;
			font-size: 26rpx;
			line-height: 118rpx;
		}
		}
		.name{
			font-size: 30rpx;
			color: #0D1D36;
			font-weight: bold;
		}
		.tz{
			width: 68rpx; color: #FFFFFF; font-size: 24rpx;
			height: 36rpx;
			background: #AB61FF;
			border-radius: 6rpx;
			margin-left: 20rpx;
		}
		.fpbl{
			position: absolute;
			left: 500rpx;
			text{
				font-size: 24rpx;
				color: #4B9CFF;
			}
			.fpblsz{
				width: 68rpx;
				height: 36rpx;
				border: 2rpx solid #4B9CFF;
				border-radius: 6rpx;
				margin-left: 10rpx;
			}
			.bfh{
				font-size: 24rpx;
				margin-left: 15rpx;
			}
		}
		.bz{
			color: #FF9028;
			font-size: 26rpx;
		}
		.bzxx{
			color: #0E1E36;
			font-size: 26rpx;
			margin-left: 46rpx;
		}
		.button {
			width: 662rpx;
			margin:106rpx auto 71rpx auto;
			background: #ab61ff;
			border-radius: 40rpx;
			border: 0;
			color: #fff;
			&.u-hairline-border:after {
				border: 0;
			}
		}
</style>
